<i18n>
{
  "en": {
    "page_title": ""
  },
  "zh": {
    "page_title": ""
  }
}
</i18n>

<template>
  <div>
    <div class="mb20">当前选择的要移动的产品：{{selectedProducts}}</div>
    <div class="mb20">请选择要移动的目标产品目录:</div>
    <el-card>
      <el-tree
        ref="tree"
        node-key="id"
        :highlight-current="true"
        :data="treeData"
        :props="treeProps"
        accordion
        @node-click="handleNodeClick">
      </el-tree>
    </el-card>
  </div>


</template>

<script>

  export default {
    data() {
      return {
        dataLoading: false,
        // targetProductDirectoryId: null,
        treeData: [],
        treeProps: {
          children: 'childList',
          label: 'name'
        }
      };
    },
    props: {
      products: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    // watch: {
    //   '$route': {
    //     handler: 'routeChanged',
    //     immediate: true
    //   }
    // },
    created() {
      // TODO: remote load
      // this.treeData = mockTreeData;
      this.getProductDirList();
    },
    computed: {
      selectedProducts() {
        let p = this.products;
        return p.map(x=>x.inmodel).join(', ')
      }
    },
    methods: {
      handleNodeClick(data) {

        let id = data.id

        this.$emit('target', data.id)

        // let sourceProductDirectoryId = this.$route.query.productDirectoryId;
        // if (targetProductDirectoryId === sourceProductDirectoryId) {
        //   this.$message({
        //     message: '不能移动到同一目录下！',
        //     type: 'warnging'
        //   });
        //   return;
        // }

        // // TODO ajax call


        // this.$message({
        //   message: '移动成功！',
        //   type: 'success'
        // });

        // this.$emit('moved')

      },
      // 获取数据列表
      getProductDirList () {
        this.dataLoading = true
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/queryProductDirList'),
          method: 'post',
          data: this.$http.adornParams({
          })
        }).then(data => {
          let treeData = []
          if (data.code === 0) {
            treeData = data.data || [];
          }

          this.treeData = treeData
          this.dataLoading = false
        })
      },
    }
  }
</script>

<style scoped>
  .mb20 {
    margin-bottom: 20px;
  }

  .custom-tree-node {
    display: block;
    width: 100%;
  }

  /* .custom-tree-node.is-leaf {
    background: #1890ff;
  } */

  /* background: #1890ff; */
</style>
